<script setup lang="ts">
import { shopprosFn,getDataFn } from '@/api/getPro'
import { useRoute,useRouter } from 'vue-router'
import { ref,type Ref,onMounted } from 'vue'
import { addCartFn,getCartFn,delCartFn} from '@/api/cart'

const route = useRoute()
const router = useRouter()
const num:Ref<number> = ref(0)
const cartPrice:Ref<number|string> = ref('')
const cartNum:Ref<number|string> = ref('')
const proDetail:Ref<any[]> = ref([])
const cartlist:Ref<any[]> = ref([])
const disable = ref(false)

// interface Ipro {
//     id: number,
//     img: string,
//     shopname: string,
// }
const proList:Ref<any[]> = ref([])
const shopproList:Ref<any[]> = ref([])
const shopprokind:Ref<any[]> = ref([])

function activeNmClick(name:string){
    console.log(name);
    if(name){
    shopprokind.value = shopproList.value.filter(item => item.category == name)
    console.log(shopprokind.value);
    }
    else {
        shopprokind.value = shopproList.value[0]
    }
}


function getCart(){
     //获取当前店铺购物车的数据
     getCartFn().then(res => {
    console.log(res.filter(item => item.id == route.query.id));
    cartlist.value = res.filter(item => item.id == route.query.id)
    cartNum.value = cartlist.value.length

    //这里判断
    disable.value = cartNum.value == 0? true : false
    console.log(cartNum.value);

    let num1 = 0
    cartlist.value.forEach(item => {
       
        num1 += item.price * item.num
    })
    cartPrice.value = num1
 })
}

onMounted(() => {
//获取当前店铺购物车的数据
    getCart()
     
    
    
    
   
    //获取店铺信息
    getDataFn().then(res => {
    console.log(res);
    proList.value = res.filter(item => item.id == route.query.id)[0]
    console.log(proList.value.img);
    })

    //获取商铺里的商品信息
    shopprosFn(route.query.id).then(res => {
        console.log(res);
       console.log(route.query.id);
       shopproList.value = res
       
       // 初次加载时选择第一个类别产品，如果有的话
       if( shopproList.value.length>0){
        // 选择第一个分类传参  调用函数即可
        activeNmClick(shopproList.value[0].category)
        console.log(shopproList.value[0]); //对象不能赋值给数组
        
       }
             
    })
})


function minusAddClick(proid:any,type:string){
    if(type == '10086'){
        // num.value = num.value == 0? 0: --num.value
        if(num.value == 0){
            disable.value = true
      //从购物车表删除该商品   
      delCartFn(proid).then(res => {
        console.log(res);
        // 重新获取购物车数据   要在更新购物车数据后再获取 在函数体里面写
        getCart() 
      })
        } else {
            disable.value = false
            --num.value
        }

      } else{
        ++num.value
        disable.value = false
        console.log(proid);
    //过滤出当前商品的详细数据
    proDetail.value = shopproList.value.filter(item=>item.proid == proid)[0]   
    console.log(proDetail.value);
    
    //并更新购物车数据  传入对象  不能是数组？  Object.assign(JSON.parse(JSON.stringify(proDetail.value)),num)
    //这个报错  {}...proDetail.value,num}  里面的num是响应式数据 num:num.value 不能简写
    addCartFn({...proDetail.value,num:num.value}).then(res => {
        console.log(res); 
        // 重新获取购物车数据   要在更新购物车数据后再获取 在函数体里面写
        getCart() 
    })   
    }
      
}

function onClickIcon(){
    router.push('/order')
}

</script>
<template>
    <div>
        <header>
            <div class="shopheader" :style="{backgroundImage: `url(${proList.img})`}">
           
                <van-icon @click="router.go(-1)" size="25" color="white" name="arrow-left" />
                <!-- 没出来原因是index.html没有配置好最新的 -->
                <div>
                <i class="iconfont icon-sousuo"></i>
                <i class="iconfont icon-shoucang"></i>
                <i class="iconfont icon-sangediandian"></i>
            </div>
           
          
          </div>

            <div class="shopinfo">
                <van-image  width="3rem"
                height="3rem" :src="proList.img"></van-image>
                <h1>{{proList.shopname}}</h1>
                <span>分类:{{proList.category}}</span>&nbsp;&nbsp;
                <span>人均{{proList.avgprice}}</span>
                <p style="color:gray">公告：小龙虾已全面升级为全新版本，全新功能将于近期推出！...</p>
            </div>
        </header>
         
         <section>
         <!-- 切换 -->
         <van-tabs v-model:active="activeName">
  <van-tab title="点餐" name="a">
    <!-- 此处可以拆成局部组件 -->
    <footer>
        <!-- 左侧边栏内容 -->
            <div class="left">
             
                <van-sidebar v-model="active">
         <van-sidebar-item @click="activeNmClick(item.category)" v-for="item in shopproList" :title="item.category" :key="item.category" badge="1" />
               </van-sidebar>

            </div>

            <!-- 右侧边栏内容 -->
            <div class="right">
                <van-card  v-for="item in shopprokind"  :key="item.proid"
  :num="item.salenum+'月销量'"
  :price="item.price"
  :desc="item.descpro"
  :title="item.proname"
  :thumb="item.img"
  
>
<!-- :tag="item.star == 1? '招牌' :''"   @click="router.push({name:'detail',query:{proid:item.proid,id:item.id}})"-->
 <template #tag>
    <div class="tag" style="background-color: #f66; color: white; padding: 1px; border-top-left-radius: 5px;border-bottom-right-radius: 5px;">
        {{item.star == 1? '招牌' :''}}
    </div>
 </template>
 <template #thumb>
    <van-image  @click="router.push({name:'detail',query:{proid:item.proid,id:item.id}})" :src="item.img"></van-image>
  </template>
  <template #tags>
    <van-tag plain type="primary">8.3折</van-tag>
    <van-tag plain type="primary">招牌</van-tag>
  </template>
  <template #footer>
    <van-button :disabled="disable" square @click="minusAddClick(item.proid,'10086')" color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini">-</van-button>
    {{ cartNum }}
    <van-button @click="minusAddClick(item.proid,'10087')" square color="linear-gradient(to right, #ff6034, #ee0a24)" size="mini">+</van-button>
  </template>
</van-card>

<!-- 可以封装成局部组件 -->
<van-action-bar>
  <van-action-bar-icon icon="cart-o" :badge="cartNum" @click="onClickIcon" />
   <h5 style="color: white;">{{cartPrice+4}}元</h5> &#x3000;
  <span>| 另需配送费￥4 </span>  &#x3000; &#x3000;
  <span>20元起送</span>
</van-action-bar>

            </div>           
        </footer>
  </van-tab>

  <van-tab title="评价4.5" name="b">内容 2</van-tab>
  <van-tab title="商家" name="c">内容 3</van-tab>
</van-tabs>



         </section>

    </div>
</template>

<style>
 *{
    margin: 0;
    padding: 0;
 }
.shopheader{
    width: 100%;
    height: 100px;
    opacity: 0.8;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.iconfont{
    color: white;
    font-size: 25px;
    margin-right: 15px;
}

.shopinfo{
    height: 100px;
    background-color: rgb(255, 255, 255);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: relative;
    top: -16px;
    padding: 10px 10px;
}

footer{
    display: flex;
}

.right{
    /* background-color: yellow;
     */
     width: 100%;
}

.van-action-bar{
    margin: 0 40px;
    bottom: 10px;
    background-color: gray;
    width: 80%;
    height: 40px;
    position: fixed;
    border-top-left-radius: 30px !important; /* 左上角圆角 */
    border-bottom-left-radius: 30px !important; /* 左下角圆角 */
    border-top-right-radius: 30px; /* 左上角圆角 */
    border-bottom-right-radius: 30px; /* 左下角圆角 */
}
.van-action-bar-icon{
    background-color: gray;
    border-top-left-radius: 30px !important; /* 左上角圆角 */
    border-bottom-left-radius: 30px !important; /* 左下角圆角 */
    /* // font-size: 50px; */
}


</style>